<template>
    <div class='view-container'>
    <ion-row class="app-layoutpanel">
        <ion-col v-show="detailsModel.container1.visible"  style="" class="app-layoutpanel-container MobListCard">
            <ion-row style="height:100%;">
                
                <ion-col v-show="detailsModel.stage_id_text.visible"  :lg="6" :size="6" style="" class="app-layoutpanel-field">
                    <div class="item-field ">
                    
                    <app-mob-span  v-if="data.stage_id_text" :context="context" :value="data.stage_id_text" :itemParam="{}"   :isCache="false" codeListType="STATIC" tag="CodeList"></app-mob-span>
                </div>
                
                
                </ion-col>
                
                <ion-col v-show="detailsModel.planned_revenue.visible"  :lg="5" :size="5" :offset="1" style="" class="app-layoutpanel-field">
                    <div class="item-field ">
                    <ion-label class="item-field-label ">￥</ion-label>
                    <app-mob-span  v-if="data.planned_revenue" :context="context" :value="data.planned_revenue" :itemParam="{}"  ></app-mob-span>
                </div>
                
                
                </ion-col>
                
                <ion-col v-show="detailsModel.name.visible"  :size="12" style="font-size:18px;font-weight:bold" class="app-layoutpanel-field MobListMainInfo">
                    <div class="item-field ">
                    
                    <app-mob-span  v-if="data.name" :context="context" :value="data.name" :itemParam="{}"  ></app-mob-span>
                </div>
                
                
                </ion-col>
                
                <ion-col v-show="detailsModel.partner_name.visible"  :size="12" style="" class="app-layoutpanel-field">
                    <div class="item-field ">
                    
                    <app-mob-span  v-if="data.partner_name" :context="context" :value="data.partner_name" :itemParam="{}"  ></app-mob-span>
                </div>
                
                
                </ion-col>
                
                <ion-col v-show="detailsModel.priority.visible"  :size="12" style="" class="app-layoutpanel-field">
                    <div class="item-field ">
                    
                    <app-mob-rate  class="app-form-item-rate"   :value="data.priority" ></app-mob-rate>
                </div>
                
                
                </ion-col>
            </ion-row>
        </ion-col>
    </ion-row>
</div>
</template>
<script lang='ts'>
import { Vue, Component, Prop, Provide, Emit, Watch, Model } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { Subject, Subscription } from 'rxjs';
import { ControlInterface } from '@/interface/control';
import GlobalUiService from '@/global-ui-service/global-ui-service';
import Crm_leadService from '@/app-core/service/crm-lead/crm-lead-service';
import ListLayoutService from '@/app-core/ctrl-service/crm-lead/list-layout-panel-service';

import { PanelUserControlModel, PanelButtonModel, PanelControlModel, PanelFieldModel, PanelRawitemModel, PanelContainerModel } from '@/model/panel-detail';


@Component({
    components: {
    }
})
export default class ListLayoutBase extends Vue implements ControlInterface {

    /**
     * 名称
     *
     * @type {string}
     * @memberof ListLayout
     */
    @Prop() protected name?: string;

    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof ListLayout
     */
    @Prop() protected viewState!: Subject<ViewState>;

    /**
     * 应用上下文
     *
     * @type {*}
     * @memberof ListLayout
     */
    @Prop({ default: {} }) protected context?: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof ListLayout
     */
    @Prop({ default: {} }) protected viewparams?: any;

    /**
     * 视图状态事件
     *
     * @protected
     * @type {(Subscription | undefined)}
     * @memberof ListLayout
     */
    protected viewStateEvent: Subscription | undefined;

    /**
     * 获取部件类型
     *
     * @returns {string}
     * @memberof ListLayout
     */
    protected getControlType(): string {
        return 'PANEL'
    }

    /**
     * 全局 ui 服务
     *
     * @private
     * @type {GlobalUiService}
     * @memberof ListLayout
     */
    private globaluiservice: GlobalUiService = new GlobalUiService();

    /**
     * 建构部件服务对象
     *
     * @type {ListLayoutService}
     * @memberof ListLayout
     */
    protected service: ListLayoutService = new ListLayoutService();

    /**
     * 实体服务对象
     *
     * @type {Crm_leadService}
     * @memberof ListLayout
     */
    protected appEntityService: Crm_leadService = new Crm_leadService();
    

    /**
     * 关闭视图
     *
     * @param {any[]} args
     * @memberof ListLayout
     */
    protected closeView(args: any[]): void {
        let _this: any = this;
        _this.$emit('closeview', args);
    }


   /**
     * 生命周期
     *
     *  @memberof ListLayout
     */  
    created(){
        this.afterCreated();
    }
   /**
     * 执行created后的逻辑
     *
     *  @memberof ListLayout
     */  
    afterCreated(){
        if(this.item){
            this.data = this.item;
            this.panelLogic({ name: '', newVal: null, oldVal: null });
            return;
        }
       if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (!Object.is(tag, this.name)) {
                    return;
                }
                if (Object.is('load', action)) {
                    this.load(data);
                }
            });
        } 
        this.panelLogic({ name: '', newVal: null, oldVal: null });
    }
   /**
     * 数据
     *
     *  @memberof ListLayout
     */  
    public data :any ={} ;

    /**
     * 部件行为--fetch
     *
     * @type {string}
     * @memberof ListLayout
     */
    @Prop() protected fetchAction!: string;

   /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof Mob
     */
    @Prop({ default: true }) protected showBusyIndicator?: boolean;

    /**
     * 接口实现
     *
     * @returns {any[]}
     * @memberof ListLayout
     */
    getDatas(): any[] {
        if (!this.item) {
            return [];
        }
        return [this.item];
    }
    getData() {
        return this.item;
    }

    /**
     * 面板数据对象
     *
     * @type {*}
     * @memberof ListLayout
     */
    @Prop() protected item?: any;


    /**
     * 数据加载
     *
     * @private
     * @param {*} [data={}]
     * @param {string} [type=""]
     * @returns {Promise<any>}
     * @memberof ListLayout
     */
    private async load(data: any = {}, type: string = ""): Promise<any> {
        const parentdata: any = {};
        this.$emit('beforeload', parentdata);
        Object.assign(data, parentdata);
        const response: any = await this.service.get(this.fetchAction, this.context, data, this.showBusyIndicator);
        if (!response || response.status !== 200) {
            this.$notify({ type: 'danger', message: response.info });
            return Promise.resolve(response);
        }
        this.$emit('load', (response.data && response.data.records) ? response.data.records : []);
        this.data = [];
        this.data = response.data.records;
        return Promise.resolve(response);
    }

    @Watch('item')
    public itemChange(){
         this.data = this.item;
    }


   /**
     * 表单逻辑
     *
     * @private
     * @param {{ name: string, newVal: any, oldVal: any }} { name, newVal, oldVal }
     * @memberof ListLayout
     */
    private panelLogic({ name, newVal, oldVal }: { name: string, newVal: any, oldVal: any }): void {
                






    }

   /**
     * 详情模型集合
     *
     * @type {*}
     * @memberof ListLayout
     */
    protected detailsModel: any = {
        stage_id_text: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'stage_id_text', panel: this, visible: true  })
, 
        planned_revenue: new PanelFieldModel({ caption: '￥', itemType: 'FIELD', name: 'planned_revenue', panel: this, visible: true  })
, 
        name: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'name', panel: this, visible: true  })
, 
        partner_name: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'partner_name', panel: this, visible: true  })
, 
        priority: new PanelFieldModel({ caption: '', itemType: 'FIELD', name: 'priority', panel: this, visible: true  })
, 
        container1: new PanelContainerModel({ caption: '', itemType: 'CONTAINER', name: 'container1', panel: this, visible: true  })
, 
    };

}
</script>

<style lang='less'>
@import './list-layout-panel.less';
</style>

